<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <form class="layui-form" action="" id="openClassAddForm" lay-filter="openClassAddFormFilter">

                <div class="layui-form-item">
                    <label class="layui-form-label">日期<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" id="classDate" class="layui-input" readonly
                               placeholder="请选择日期" lay-verify="required" lay-reqtext="日期为必填项！"
                               name="classDate" lay-filter="classDate">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">技术专题<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="subject" name="subject"
                               lay-verify="required|subject" lay-reqtext="技术专题不能为空！"
                               autocomplete="off" placeholder="请输入技术专题">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主讲人<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="speaker" name="speaker"
                               lay-verify="required|speaker" lay-reqtext="主讲人为必填项！"
                               autocomplete="off" placeholder="请输入主讲人">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">组织人<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="organize" name="organize"
                               lay-verify="required|organize" lay-reqtext="组织人为必填项"
                               autocomplete="off" placeholder="请输入组织人">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">院系<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="college" name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">专业<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="major" name="major" lay-filter="major" lay-verify="required" lay-reqtext="专业为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地点<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="place" name="place"
                               lay-verify="required|place" lay-reqtext="地点为必填项"
                               autocomplete="off" placeholder="请输入地点">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">群体说明<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               name="groupShow" lay-filter="groupShow" id="groupShow"
                               lay-verify="required|groupShow" lay-reqtext="群体说明为必填项"
                               autocomplete="off" placeholder="请输入群体说明">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">方式<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="way" name="way" lay-filter="way"
                                lay-verify="required" lay-reqtext="方式为必填项">
                            <option value="">请选择</option>
                            <option value="线下">线下</option>
                            <option value="直播">直播</option>
                            <option value="录播">录播</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创新学分值<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="score" name="score"
                               lay-verify="required" lay-reqtext="创新学分值为必填项"
                               placeholder="请输入创新学分值" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">参加人数<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="participants" name="participants"
                               lay-verify="required|participants" lay-reqtext="参加人数为必填项"
                               placeholder="请输入参加人数" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                            <textarea placeholder="请输入备注信息" class="layui-textarea"
                      name="remark" lay-filter="remark"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" id="saveBtn" class="layui-btn layui-btn-normal"
                                lay-submit="" lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
    layui.use(['form','layedit','laydate','layarea'], function () {
        var form = layui.form,
            layedit=layui.layedit,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear;

        form.render();

        function formInit() {
            //初始化加载院系
            let url = 'CollegeServlet';
            let params = {method: 'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let colleges = res.data;
                for (let i = 0; i < colleges.length; i++) {
                    $('#college').append("<option value='"+colleges[i].id+"'>"+colleges[i].name+"</option>");
                }
                form.render('select');
            };
            $.get(url, params, successFn);
        }

        formInit();

        form.on('select(college)', function (data) {
            //清空目前专业下拉狂中的数据
            $('#major').empty();
            $('#major').append("<option value=''>请选择</option>");
            let college = data.value;
            let url = 'MajorServlet';
            let params = {method: 'search', collegeSearch: college};
            let successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                }
                form.render('select');
            }
            $.get(url, params, successFn);
        });

        $("#subject").blur(function(){
            var subject = $("#subject").val();
            var reg = /^([A-Za-z]|[\u4E00-\u9FA5])+$/;//正则表达式
            if(subject.length == 0|| subject==null || subject == '') {
                layer.msg('技术专题为必填项！', {icon: 5});
            }else{
                if(!reg.test(subject) || subject.length > 50) {
                    layer.msg('技术专题应为字母或汉字，1-50 个字符', {icon: 5});
                }
            }
        });

        $("#speaker").blur(function(){
            var speaker = $("#speaker").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;//正则表达式,2-4个汉字
            if(speaker.length == 0|| speaker==null || speaker == '') {
                layer.msg('主讲人为必填项！', {icon: 5});
            }else{
                if(!reg.test(speaker)) {
                    layer.msg('请输入主讲人真实姓名，2-4个汉字！', {icon: 5});
                }
            }
        });

        $("#organize").blur(function(){
            var organize = $("#organize").val();
            var reg = /^[\u4e00-\u9fa5]{2,4}$/;//正则表达式,2-4个汉字
            if(organize.length == 0|| organize==null || organize == '') {
                layer.msg('组织人为必填项！', {icon: 5});
            }else{
                if(!reg.test(organize)) {
                    layer.msg('请输入组织人真实姓名，2-4个汉字！', {icon: 5});
                }
            }
        });

        $("#score").blur(function(){
            var score = $("#score").val();
            if(score.length == 0|| score==null || score == '') {
                layer.msg('分值为必填项！', {icon: 5});
            }else{
                if(score<0||score>100) {
                    layer.msg('分值大小应在0到100！', {icon: 5});
                }
            }
        });

        $("#participants").blur(function(){
            var participants = $("#participants").val();
            if(participants.length == 0|| participants==null || participants == '') {
                layer.msg('参加人数为必填项！', {icon: 5});
            }else{
                if(participants<0) {
                    layer.msg('参加人数应大于0！', {icon: 5});
                }
            }
        });

        $("#groupShow").blur(function(){
            var groupShow = $("#groupShow").val();
            var reg = /^[\u4e00-\u9fa5]{2,15}$/;//正则表达式,2-30个汉字
            if(groupShow.length == 0|| groupShow==null || groupShow == '') {
                layer.msg('群体说明为必填项！', {icon: 5});
            }else{
                if(!reg.test(groupShow)) {
                    layer.msg('群体说明为2-15个汉字！', {icon: 5});
                }
            }
        });

        $("#place").blur(function(){
            var place = $("#place").val();
            if(place.length == 0|| place==null || place == '') {
                layer.msg('地点为必填项！', {icon: 5});
            }
        });

        //监听提交
        form.verify({
            subject:function (value) {
                if(/^([A-Za-z]|[\u4E00-\u9FA5])+$/.test(value)==false){
                    return '技术专题应为字母或汉字，1-50 个字符！'
                }
            },
            organize:function (value) {
                if(/^[\u4e00-\u9fa5]{2,4}$/.test(value)==false){
                    return '请输入组织人真实姓名，2-4个汉字！'
                }
            },
            speaker:function (value) {
                if(/^[\u4e00-\u9fa5]{2,4}$/.test(value)==false){
                    return '请输入主讲人真实姓名，2-4个汉字！'
                }
            },
            groupShow:function (value) {
                if(/^[\u4e00-\u9fa5]{2,15}$/.test(value)==false){
                    return '群体说明为2-15个汉字！'
                }
            },
            score:function (value) {
                if(value<0||value>100){
                    return '分值大小应在0到100！'
                }
            },
            participants:function (value) {
                if(value<0){
                    return '参加人数不应小于0！'
                }
            }
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = 'OpenClassServlet?method=add';
            let successFn = function (res) {
                if (res == 'true') {
                    layer.close(parentIndex);
                    layer.msg("添加成功",{icon: 1});
                    $('#openClassAddForm')[0].reset();
                    form.render();
                    parent.layui.table.reload('currentTableId');
                }
            }
            $.post(url, data.field, successFn);
        });


        laydate.render({
            elem:'#classDate',
            trigger:'click', //解决日历一闪而过的问题
        });


    });
</script>